<template>
	<view class="container">
		<view class="bg-banner">
			<view class="top flex-cenetr">
				<view class="l-text flex-cenetr-wrap">
					<view class="vip-golden color-yellow">
						黄金会员
					</view>
					<view class="dayNum color-gray">
						第342天
					</view>
				</view>
				<view class="person-top flex-cenetr">
					<!-- #ifdef MP-WEIXIN -->
						<view class="person-logo">
								<open-data type="userAvatarUrl"></open-data>
						</view>
					<!-- #endif -->
					
					<!-- #ifdef MP-ALIPAY -->
					<view class="avatar-logo flex-cenetr" v-if="!isShowLogin">
						<view class="iconfont icon-touxiang"></view>
					</view>
					<image v-else :src="userInfo.avatar" mode="aspectFit"></image>
					<!-- #endif -->
				</view>
				<view class="r-text flex-cenetr-wrap">
					<view class="vip-date color-yellow">
						2020-11-11
					</view>
					<view class="limitDay color-gray">
						有效期至
					</view>
				</view>
			</view>
			<view class="line">
				<uni-steps :options="options" :active="active"></uni-steps>
			</view>
			<view class="bg-card flex-cenetr">
				<view class="b-card">
					<view class="success">
						已达成该等级
					</view>
					<view class="need">
						需要成长值1000点
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="vip-right">
				<view class="title flex-cenetr">
					<view class="c-left"></view>
					<view class="c-text flex-cenetr">
						<view class="iconfont icon-disanfang1"></view>
						<view class="value">会员特权</view>
					</view>
					<view class="c-left"></view>
				</view>
				<vip></vip>
			</view>
		</view>
		<!-- 我的权益 -->
		<view class="list">
			<view class="my-card">
				<view class="vip-rights">
					<view class="title flex-cenetr">
						<view class="c-left"></view>
						<view class="c-text flex-cenetr">
							<view class="iconfont icon-disanfang1"></view>
							<view class="value">我的权益</view>
						</view>
						<view class="c-left"></view>
					</view>
				</view>
				<view class="cardList">
					<view class="card">
						<view class="text clamp1">
							5折购买权益
						</view>
						<view class="num">
							x 1次
						</view>
					</view>
					<view class="card">
						<view class="text clamp1">
							5折购买权益
						</view>
						<view class="num">
							x 1次
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		import vip from '../../components/vip-rights/vip-rights.vue';
		import uniSteps from '../../components/uni-steps/uni-steps.vue';
		export default{
			components: {
				vip,
				uniSteps
			},
			data(){
				return{
					active:0,//默认一等级
					options:[{title: 'v1'}, {title: 'v2'}, {title: 'v3'}, {title: 'v4'}]
				}
			}
		}
</script>

<style>
	@import url("../../common/css/iconfont.css");
	@import url("../../common/css/common.css");
	page{
		background-color:#F7F7F7;
		padding-bottom: 100rpx;
	}
	.container{
		height: 100%;
	}
	.bg-banner{
		width: 100%;
		height: 680rpx;
		background-color: #000;
	}
	.vip-right{
		margin-top: -105rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
		
	.vip-rights{
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.list{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom:22rpx;
	}
	/* 特权 */
	
	.container .title {
		height: 102rpx;
		padding: 0 20rpx;
		background-color: #fff;
	}
	
	.container .c-left {
		width: 64rpx;
		height: 4rpx;
		background-color: #DDD;
	}
	.container .iconfont{
		font-size: 36rpx;
		margin-right: 8rpx;
	}
	.container .c-text {
		margin: 0 20rpx;
	}
	
	.container .value {
		height: 76rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
		line-height: 76rpx;
		letter-spacing: 1px;
		margin-left: 4rpx;
	}
	.my-card{
		width: 100%;
		/* width: 702rpx; */
		margin: 0 20rpx;
		background-color: #fff;
		box-sizing: border-box;
	}
	.cardList{
		padding: 0 14rpx;
	}
	.cardList .card{
		width: 100%;
		height: 242rpx;
		background: linear-gradient(138deg, #FFE6B4 0%, #FFBC93 100%);
		border-radius: 6rpx;
		margin-bottom: 16rpx;
		position: relative;
	}
	.cardList .card view{
		position: absolute;
		left: 56rpx;
	}
	.cardList .card .text{
		width: 220rpx;
		min-height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #3C3C3A;
		line-height: 50rpx;
		letter-spacing: 1px;
		top: 48rpx;
	}
	.cardList .card .num{
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #B15D23;
		line-height: 40rpx;
		top:108rpx;
	}
	/* 等级 */
	.top{
		height:180rpx;
		background-color: #ccc;
	}
	.person-top{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color:#4C4A54;
		overflow: hidden;
		margin: 0 32rpx;
	}
	.person-logo{
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.avatar-logo{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #fff;
	}
	.color-gray{
		height: 28rpx;
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		color: #777777;
		line-height: 28rpx;
	}
	.color-yellow{
		height: 34rpx;
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		color: #EADAA8;
		line-height: 34rpx;
		margin-bottom: 12rpx;
	}
	.line{
		margin: 34rpx 0 22rpx;
	}
	.bg-card{
		
	}
	.b-card{
		width:630rpx;
		height:246rpx;
		background: linear-gradient(180deg, #E2E6F0 0%, #AAB4CB 100%);
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
		position:relative;
	}
	.success,.need{
		position: absolute;
	}
	.success{
		width: 214rpx;
		height: 52rpx;
		padding: 8rpx 20rpx;
		background: #4B5666;
		border-radius: 26rpx;
		box-sizing: border-box;
		top: 94rpx;
		left: 106rpx;
		line-height: 34rpx;
	}
	.need{
		height: 28rpx;
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		color: #4B5666;
		line-height: 28rpx;
		top:166rpx;
		left: 120rpx;
	}
</style>
